<!DOCTYPE html>
<html lang="en">
<head>
    <title>气清商城</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="./images/favicon.ico"/>

    <!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap"-->
    <!--          rel="stylesheet">-->
    <!--    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/owl.carousel.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/jquery-ui.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/chosen.min.css">
    <link rel="stylesheet" href="./css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="./css/magnific-popup.min.css">
    <link rel="stylesheet" href="./css/lightbox.min.css">
    <link rel="stylesheet" href="./js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="./css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="./css/mobile-menu.css">
    <link rel="stylesheet" href="./fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/vue.min.js"></script>
    <style> [v-cloak] {
        display: none;
    } </style>
</head>
<body class="inblog-page">
<header class="header style7">
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-left">
                <div class="header-message">
                    欢迎来到气清!
                </div>
            </div>
            <div class="top-bar-right">
                <div id="loginbar">
                    <ul class="header-user-links">
                        <li>
                            <a href="http://www.qk.com/login">请登录</a>
                        </li>
                    </ul>
                    <ul class="header-user-links">
                        <li>
                            <a href="http://www.qk.com/regist">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav-container">
        <div class="container">
            <div class="header-nav-wapper main-menu-wapper">
                <div class="header-nav">
                    <div class="container-wapper">
                        <ul class="teamo-clone-mobile-menu teamo-nav main-menu " id="menu-main-menu">
                            <li class="menu-item  menu-item-has-children">
                                <a href="http://www.qk.com/allproducts" class="teamo-menu-item-title"
                                   title="Home">全部商品</a>
                            </li>
                            <li class="menu-item menu-item-has-children">
                                <a href="http://www.qk.com/shoppingcart" class="teamo-menu-item-title"
                                   title="Shop">购物车</a>
                            </li>
                            <li class="menu-item  menu-item-has-children item-megamenu">
                                <a href="http://www.qk.com/order" class="teamo-menu-item-title" title="Pages">订单</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-header">
                <div class="row">
                    <div class="col-lg-3 col-sm-4 col-md-3 col-xs-7 col-ts-12 header-element">
                        <div class="logo">
                            <a href="http://www.qk.com/index">
                                <img src="./images/logo.png" alt="img">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-7 col-sm-8 col-md-6 col-xs-5 col-ts-12">
                        <div class="block-search-block">
                            <form class="form-search form-search-width-category">
                                <div class="form-content">
                                    <div class="inner">
                                        <input type="text" class="input" id="productName" value="" placeholder="输入商品名称">
                                    </div>
                                    <button class="btn-search" type="button" id="searchProduct">
                                        <span class="icon-search"></span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="site-content">
    <main class="site-main  main-container no-sidebar">
        <div class="container">
            <div class="breadcrumb-trail breadcrumbs">
                <ul class="trail-items breadcrumb">
                    <li class="trail-item trail-begin">
                        <a href="">
								<span>
									主页
								</span>
                        </a>
                    </li>
                    <li class="trail-item trail-end active">
							<span>
								我的订单
							</span>
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="main-content-cart main-content col-sm-12">
                    <h3 class="custom_blog_title">
                        订单
                    </h3>
                    <div class="page-main-content" id="orders">
                        <!-- 这里是一个订单 -->
                        <div class="shoppingcart-content" v-for="order in orders">
                            <span>订单编号：{{order.orderId}}</span>

                            <form action="shoppingcart.html" class="cart-form">
                                <table class="shop_table">
                                    <thead>
                                    <tr>
                                        <th class="product-remove"></th>
                                        <th class="product-thumbnail"></th>
                                        <th class="product-name"></th>
                                        <th class="product-price"></th>
                                        <th class="product-quantity"></th>
                                        <th class="product-subtotal"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="cart_item" v-for=" orderItem in order.orderItems">
                                        <!-- <td class="product-remove">
                                             <a href="#" class="remove"></a>
                                         </td> -->
                                        <td class="product-thumbnail">
                                            <a href="#">
                                                <img :src='orderItem.image' alt="img"
                                                     class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image">
                                            </a>
                                        </td>
                                        <td class="product-name" data-title="Product">
                                            <a href="#" class="title">{{orderItem.title}}</a>
                                            <!-- <span class="attributes-select attributes-color">Black,</span>
                                             <span class="attributes-select attributes-size">XXL</span> -->
                                        </td>
                                        <td class="product-price" data-title="Price">
													<span class="woocommerce-Price-amount amount">
														{{orderItem.num}}台
													</span>
                                        </td>
                                        <td class="product-price" data-title="Price">
													<span class="woocommerce-Price-amount amount">
														<span class="woocommerce-Price-currencySymbol">
															￥
														</span>
														{{orderItem.price/100}}/天
													</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="actions">
                                            <span>租用起始：{{date("YYY-mm-dd",order.start)}} </span>
                                            <span>租用结束：{{date("YYY-mm-dd",order.end)}}</span>
                                            <div class="order-total" >
                                    					<span class="title">
                                    						单日租金:
                                    					</span>
                                                <span class="total-price">
                                    						￥{{dayPrice(order)}}
                                    					</span>
                                            </div>
                                        </td>
                                        <td class="actions">

                                            <div class="order-total">
														<span class="title">
															支付租金:
														</span>
                                                <span class="total-price">
															￥{{payAll(order.payment/100)}}
														</span>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </form>
                            <div class="control-cart">
                                <button class="button btn-continue-shopping" v-on:click="update(order)">
                                    {{showstatus(order.status)}}
                                </button>
                            </div>
                        </div>
                        <!-- 订单结束 -->
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>


<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery.plugin-countdown.min.js"></script>
<script src="./js/jquery-countdown.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/owl.carousel.min.js"></script>
<script src="./js/magnific-popup.min.js"></script>
<script src="./js/isotope.min.js"></script>
<script src="./js/jquery.scrollbar.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/mobile-menu.js"></script>
<script src="./js/chosen.min.js"></script>
<script src="./js/slick.js"></script>
<script src="./js/jquery.elevateZoom.min.js"></script>
<script src="./js/jquery.actual.min.js"></script>
<script src="./js/fancybox/source/jquery.fancybox.js"></script>
<script src="./js/lightbox.min.js"></script>
<script src="./js/owl.thumbs.min.js"></script>
<script src="./js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="./js/frontend-plugin.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script type="text/javascript">

    var TT = QK = {
        checkLogin: function () {
            var _ticket = $.cookie("QK_TICKET");

            if (!_ticket) {
                return;
            }
            //当dataType类型为jsonp时，jQuery就会自动在请求链接上增加一个callback的参数
            $.ajax({
                url: "http://sso.qk.com/user/query/" + _ticket,
                dataType: "jsonp",
                type: "GET",
                success: function (data) {
                    if (data.status == 200) {
                        //要求获取的是user的JSON串
                        var _data = JSON.parse(data.data);//将JSON串转化为对象
                        var html = "<div class='top-bar-right'><div id='loginbar'><ul class='header-user-links'><li><a href=\"/user/logout\" class=\"link-logout\"> " + _data.username + ",[退出]</a></li></ul><ul class=\"header-user-links\"> <li><a href=\"http://www.qk.com/personal\" class=\"link-setting\">个人中心</a></li></ul> </div> </div> ";
                        $("#loginbar").html(html);
                    }
                }
            });
        }
    }
    // <a href="http://www.jt.com/user/logout" class="link-logout">[退出]</a> <a>个人中心</a>
    $(function () {
        // 查看是否已经登录，如果已经登录查询登录信息
        TT.checkLogin();
    });

    $('#searchProduct').click(function () {
        title = $('#productName').val();
        console.log(title);
        window.location.href = "http://www.qk.com/allproducts?" + title;
    })


    //这里请求到订单数据进行渲染
    //渲染出所有的购物车里面的商品
    //创建一个vue
    var vm = new Vue({
        el: '#orders',
        data: {
            orders: null,
        },
    });





    init();


    function init() {
        $.ajax({
            async: false,
            url: '/order/show',
            dataType: 'json',
            success: function (result) {
                // console.info(result.data);
                vm.orders = result.data;
                var orders = result.data;
                for (var order in orders){
                    // console.log(order)
                    var orderItems = orders[order].orderItems;
                    // console.log(orderItems);
                }
                //计算总价

            }
        });
    }

    function Totalprice(orderItems) {
        var sumTotalprice = 0;
        for (var orderItem in orderItems) {

            sumTotalprice += orderItems[orderItem].price* orderItems[orderItem].num;
        }
        console.log(sumTotalprice)
        return sumTotalprice;
    }

    
    function update(order) {
        // console.log(order)
        var orderId = order.orderId;
        // console.log(order.orderId)

        $.ajax({
            async: false,
            url: '/order/update',
            dataType: 'json',
            type: "post",
            data:{"status":order.status,"orderId":orderId},
            success: function (result) {
                if (result.status == 200){
                    init();
                }else {
                    window.alert("租期未满一天，还不能结束哦！")
                }
            }
        });
    }


    function showstatus(status) {
        if (status ==1){
            return "确认收货";
        }else if (status ==2){
            return  "结束租用";
        }else if (status == 3){
            return "等待取回";
        }else if (status == 4){
            return "订单结束";
        }
    }

    function date(fmt,date){
       if (date != null){
           let ret="";
           date=new Date(date);
           const opt = {
               'Y+': date.getFullYear().toString(), // 年
               'm+': (date.getMonth() + 1).toString(), // 月
               'd+': date.getDate().toString(), // 日
               'H+': date.getHours().toString(), // 时
               'M+': date.getMinutes().toString(), // 分
               'S+': date.getSeconds().toString() // 秒
               // 有其他格式化字符需求可以继续添加，必须转化成字符串
           }
           for (let k in opt) {
               ret = new RegExp('(' + k + ')').exec(fmt)
               if (ret) {
                   fmt = fmt.replace(
                       ret[1],
                       ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
                   )
               }
           }
           return fmt
       }
    }
    function payAll(price) {
        if (price == null){
            return "--";
        }else{
            return price;
        }
    }
    function dayPrice(order) {
       return  Totalprice(order.orderItems)/100;
    }

</script>
</body>
</html>